<template>
  <div
    id="CProgress"
    @touchstart.stop="progressStart"
    @touchmove.stop="progressMove"
    @touchend.stop="progressEnd"
  >
    <el-progress
      :percentage="currentProgress"
      :stroke-width="progressWidth"
      :show-text="false"
      :color="pColor"
    ></el-progress>
    <div id="progressBtn" :class="{ progressBtnActive: isProgressBtn }"></div>
    <span>{{ currentTimeStr }}</span>
    <span>{{ musicProgress }}</span>
  </div>
</template>

<script>
let progressBtn;
let cProgress;
export default {
  props: {},
  data() {
    return {
      progressWidth: 1,
      // currentProgress: 60,
      progressWidth: 2,
      pColor: "white",
      currentProgress: 0,
      isProgressBtn: false,
      durationStr: "",
      currentTimeStr: "",
    };
  },
  methods: {
    progressStart(e) {
      // 拖拽条更加丝滑
      // progressBtn.style.transition = "width 5s ease"
      this.isProgressBtn = true;
      console.log(e);
      console.log("开始滑动");
      let currentValue = e.changedTouches[0].clientX - 20;
      // progressBtn.style.left = currentValue+"px";
      // console.log(currentValue);
      this.currentProgress = (currentValue / cProgress.offsetWidth) * 100;
    },
    progressMove(e) {
      console.log("滑动中");
      let currentValue = e.changedTouches[0].clientX - 20;
      this.currentProgress = (currentValue / cProgress.offsetWidth) * 100;
    },
    progressEnd(e) {
      this.isProgressBtn = false;
      // 修正数值
      if (this.currentProgress <= 0) {
        this.currentProgress = 0;
      }
      if (this.currentProgress >= 100) {
        this.currentProgress = 100;
      }
      // 改变当前播放状态
      this.$store.commit('setCurrentTime',(this.currentProgress/100)*this.MusicUpTimeInfo.path[0].duration)
      console.log("滑动结束");
    },
    secondToMinute(value) {
      let minute = parseInt(value / 60);
      let second = parseInt(value % 60);
      let durationStr = "";
      if (minute < 10 && second < 10) {
        durationStr = `0${minute}:0${second}`;
      } else {
        durationStr = `${minute}:${second}`;
      }
      return durationStr;
    },
  },
  computed: {
    MusicUpTimeInfo() {
      return this.$store.state.updateTimeEvent;
    },
    musicProgress() {
      let durationTime = this.MusicUpTimeInfo.path[0].duration;
      let currentTime = this.MusicUpTimeInfo.path[0].currentTime;
      if (!this.isProgressBtn) {
        this.currentProgress = (currentTime / durationTime) * 100;
      }

      this.currentTimeStr = this.secondToMinute(currentTime);
      return this.secondToMinute(durationTime);
    },
  },
  mounted() {
    progressBtn = document.querySelector("#CProgress #progressBtn");
    cProgress = document.querySelector("#CProgress");
    console.log((this.progressWidth / 100) * cProgress.offsetWidth + "px");
    progressBtn.style.left =
      (this.currentProgress / 100) * cProgress.offsetWidth + "px";
  },
  watch: {
    currentProgress() {
      if (this.currentProgress >= 0 && this.currentProgress <= 100) {
        progressBtn.style.left =
          (this.currentProgress / 100) * cProgress.offsetWidth + "px";
      }
    },
  },
};
</script>

<style>
#CProgress {
  padding-top: 10px;
}

#CProgress .el-progress-bar__outer {
  background-color: rgb(199, 192, 192);
}

#CProgress .el-progress-bar__outer .el-progress-bar__inner {
  transition: all 0s;
}
#CProgress #progressBtn {
  width: 6px;
  height: 6px;
  background-color: #fff;
  position: absolute;
  top: 8px;
  border-radius: 50%;
}
#CProgress span {
  color: #fff;
  font-size: 8px;
  margin-top: 5px;
}
#CProgress span:nth-of-type(2) {
  float: right;
}
#CProgress span:nth-of-type(1) {
  float: left;
}

.progressBtnActive {
  transform: scale(2, 2);
  box-shadow: 0 0 10px black;
}
</style>